<template>
    <view>
        <view class="topBox">
            <view class="citybox">
                <view class="citytext">
                    <picker mode="date" fields="year" @change="bindTimeChange">
                        <view class="uni-input">{{ timeStr }}</view>
                    </picker>
                </view>
                <image class="rimg" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png"
                    mode="widthFix"></image>
            </view>
            <view class="orderMoneyBox">订单总额</view>
            <view class="orderNumBox">订单总数</view>
            <view class="setBox">设置</view>

        </view>
        <view class="listBox">
            <block v-if="list.length > 0">
                <view class="list_item" v-for="(item, index) in list" :key="index">
                    <view class="itemYear">{{ item.SaleMonth }}</view>
                    <view class="itemMoney">{{ item.TotalMoney }}</view>
                    <view class="itemNum">{{ item.TotalNum }}</view>
                    <view class="itemSet">

                        <view class="checkBtn" @click="nav_to('/pages/store/statisticsOrder?yearMonth='+item.SaleMonth)">查看</view>
                    </view>
                </view>
                
            </block>
            <block v-else>
                <EmptyBox text="暂无商家~"></EmptyBox>
            </block>

        </view>
    </view>

</template>

<script>
export default {
    components: {

    },
    data() {
        return {
            list: [],
            id: null,
            user: {},
            searchContent: '',
            value1: Number(new Date()),
            timeStr: '',//显示选择的时间中文显示
            columns: [1, 2, 3],
            maxDate: Number(new Date()),
            PageIndex: 1,
            PageSize: 10,
            isMore: true
        };
    },
    onLoad(e) {
        this.id = e?.ID
        let time = this.$util.unixDatetime(this.value1, 'yy-mm')
        let year = time.split('-')[0]
        this.timeStr = year
        this.user = uni.getStorageSync('user')
        this.getList()
    },
    methods: {
        bindTimeChange(e) {
            console.log(e, 'e');

            this.timeStr = e.detail.value
            this.getList()
        },
        confirm(e) {
            console.log(e);
            this.value1 = e.value
            this.PageIndex == 1
            this.getList()
            this.closePick()
        },
        blurSearch() {
            if (this.searchContent == '') {
                this.PageIndex == 1
                this.getList()
            }

        },
        subSearch() {
            this.getList()
        },
        async getList() {
            let that = this

            uni.showLoading({
                title: '加载中'
            });
            let url = 'Order/Report'
            let res = await this.$api.post(url, { SaleYear: that.timeStr })
            if (res?.code == 0) {
                that.list = res?.data
            }
            uni.hideLoading();

        },
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`
            }

        },
    },
    onReachBottom() {
        if (this.isMore) {
            this.PageIndex = this.PageIndex + 1

            this.getList()
        }

    }

}
</script>
<style>
page {
    background-color: #f6f6f6;
}
</style>

<style lang="scss" scoped>
view {
    box-sizing: border-box;
}

text {
    margin-bottom: 20rpx;
}

.off_line {
    width: 72rpx;
    height: 40rpx;
    background: #F6F6F6;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20rpx;
}

.on_line {
    width: 72rpx;
    height: 40rpx;
    background: #E5F8F2;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #00BA82;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20rpx;
}

.remove {
    width: 96rpx;
    height: 48rpx;
    border-radius: 8rpx;
    border: 1rpx solid #FF4B4B;
    font-weight: 500;
    font-size: 24rpx;
    color: #FF4B4B;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list_item {
    display: flex;
    width: 100%;
    border-bottom: 2rpx solid #999999;

    >view {
        text-align: center;
        word-break: break-all;
        padding: 0 4rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100rpx;
    }

    .itemYear {
        width: 20%;
        min-width: 20%;
        max-width: 20%;
    }

    .itemMoney {
        width: 30%;
        min-width: 30%;
        max-width: 30%;
        border-left: 2rpx solid #999999;
        ;
    }

    .itemNum {
        width: 30%;
        min-width: 30%;
        max-width: 30%;
        border-left: 2rpx solid #999999;
        border-right: 2rpx solid #999999;
    }

    .itemSet {
        width: 20%;
        min-width: 20%;
        max-width: 20%;

        .checkBtn {
            padding: 12rpx 24rpx;
            border-radius: 14rpx;
            color: white;
            font-weight: bold;
            font-size: 22rpx;
            background: #5d8bf8;
        }
    }
}

.listBox {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    // padding: 0 24rpx;
    // margin-top: 30rpx;
    // padding-top: 90rpx;
    border: 2rpx solid #999999;
    border-bottom: none;
    border-top: none;
    padding-bottom: 100rpx;
}

.topBox {
    width: 100%;
    // background: linear-gradient(180deg, #deddfc 0%, #ededf9 100%);
    background-color: #dde7fd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    border: 2rpx solid #999999;

    >view {
        min-height: 100rpx;
        font-size: 30rpx;
        color: #333333;
        padding: 18rpx 0;
        display: flex;
        justify-content: center;
        align-items: center;
        // border-bottom: 2rpx solid #999999;
    }

    .citybox {
        width: 20%;
        min-width: 20%;
        max-width: 20%;
        // padding: 18rpx 0;
        // background: #FFFFFF;
        // box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
        // border-radius: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .citytext {
            width: max-content;
            font-size: 30rpx;
            color: #333333;
            font-weight: bold;
            margin: 0 8rpx;
        }

        .rimg {
            width: 32rpx;
            height: 32rpx;
            display: block;
            margin-top: 4rpx;
        }
    }

    .orderMoneyBox {
        width: 30%;
        min-width: 30%;
        max-width: 30%;
        text-align: center;
        border-left: 2rpx solid #999999;
    }

    .orderNumBox {
        width: 30%;
        min-width: 30%;
        max-width: 30%;
        text-align: center;
        border-left: 2rpx solid #999999;
        border-right: 2rpx solid #999999;
    }

    .setBox {
        width: 20%;
        min-width: 20%;
        max-width: 20%;
        text-align: center;
    }

}
</style>
